<!-- 监控总览-资产概况-3 -->
<script setup>
import { ref, computed } from 'vue'
import intel from '@/assets/img/overview/intel_icon.png'
import cc from '@/assets/img/overview/cc_icon.png'
import ibm from '@/assets/img/overview/ibm_icon.png'
import wd from '@/assets/img/overview/wd_icon.png'

import bjtj_icon1 from '@/assets/img/overview/bjtj_icon1.png'
import bjtj_icon2 from '@/assets/img/overview/bjtj_icon2.png'
import bjtj_icon3 from '@/assets/img/overview/bjtj_icon3.png'

import alarm_red from '@/assets/img/overview/alarm_red.png'
import alarm_ora from '@/assets/img/overview/alarm_ora.png'
import alarm_yellow from '@/assets/img/overview/alarm_yellow.png'
import alarm_blue from '@/assets/img/overview/alarm_blue.png'



// 故障设备类型统计
// const lxtjData = ref({
//   name: ['Mon1', 'Tue2', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
//   series: [
//     [320, 302, 301, 334, 390, 330, 320],
//     [120, 132, 101, 134, 90, 230, 210],
//     [220, 182, 191, 234, 290, 330, 310],
//     [250, 192, 221, 264, 250, 310, 300]
//   ]
// })
// 故障设备类型统计 x轴名称  y轴数据
const lxtjName = ref(['Mon1', 'Tue2', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])
const lxtjData = ref([
  {
    name: 'aaa',
    data: [120, 302, 301, 334, 390, 330, 320]
  },
  {
    name: 'bbb',
    data: [120, 132, 101, 134, 90, 230, 210]
  },
  {
    name: 'ccc',
    data: [220, 182, 191, 234, 290, 330, 310]
  },
  {
    name: 'ddd',
    data: [250, 192, 221, 264, 250, 310, 300]
  }
])

// 故障设备品牌统计
const sbpptj = ref([
  {
    name: 'intel',
    total: 36,
    list: [
      {
        name: '致命',
        value: 9
      },
      {
        name: '重要',
        value: 9
      },
      {
        name: '次要',
        value: 9
      },
      {
        name: '一般',
        value: 9
      },
    ]
  },
  {
    name: 'dell',
    total: 32,
    list: [
      {
        name: '致命',
        value: 9
      },
      {
        name: '重要',
        value: 9
      },
      {
        name: '次要',
        value: 9
      },
      {
        name: '一般',
        value: 5
      },
    ]
  },
  {
    name: 'ibm',
    total: 29,
    list: [
      {
        name: '致命',
        value: 8
      },
      {
        name: '重要',
        value: 8
      },
      {
        name: '次要',
        value: 7
      },
      {
        name: '一般',
        value: 6
      },
    ]
  },
])
const innerColor = ['rgba(107, 230, 193, 1)', 'rgba(63, 177, 227, 1)', 'rgba(106, 117, 158, 1)']

// 故障设备部件统计
const bjtjData = ref([
{
    fatal: 11,
    important: 2,
    secondary: 5,
  },
  {
    fatal: 9,
    important: 9,
    secondary: 9,
  },
  {
    fatal: 9,
    important: 11,
    secondary: 2,
  },
  {
    fatal: 11,
    important: 0,
    secondary: 0,
  }
])
bjtjData.value.sort((a, b) => {
  const totalA = a.fatal + a.important + a.secondary;
  const totalB = b.fatal + b.important + b.secondary;
  return totalB - totalA;
});

const percentages = computed(() => {
  const bjtjMax = (bjtjData.value[0].fatal + bjtjData.value[0].important + bjtjData.value[0].secondary) * 1.2;
  return bjtjData.value.map((item) => {
    return {
      total: item.fatal + item.important + item.secondary,
      fatalP: ((item.fatal / bjtjMax) * 100).toFixed(0),
      importantP: ((item.important / bjtjMax) * 100).toFixed(0),
      secondaryP: ((item.secondary / bjtjMax) * 100).toFixed(0),
    };
  });
});

// -------后续修改（图标）---------
const bjtjImg = [bjtj_icon1, bjtj_icon2, bjtj_icon3, bjtj_icon3]

// 故障设备部件品牌统计
const bjpptjData = ref([
  {
    name: 'intel',
    value: 9
  },
  {
    name: 'cc',
    value: 8
  },
  {
    name: 'ibm',
    value: 7
  },
  {
    name: 'wd',
    value: 5
  }
])
const bjpptjImg = [intel, cc, ibm, wd]

// -------后续修改（图标）---------
const alarmIcon = [alarm_red, alarm_ora, alarm_yellow, alarm_blue]
</script>

<template>
  <div class="gzsb">
    <!-- 故障设备类型统计\故障设备品牌统计 -->
    <div class="card-wrapper3">
      <card-module2 title="故障设备类型统计" width="49%" height="497px">
        <bar-multip :xData="lxtjName" :data="lxtjData" width="100%" height="440px" />
      </card-module2>
      <card-module2 title="故障设备品牌统计" width="49%" height="497px">
        <div class="flex h-full ppsj">
          <div class="ppsj-chart">
            <circle-in-circle :innerColor="innerColor" :data="sbpptj" width="100%" height="440px" />
          </div>
          <div  class="ppsj-info">
            <div class="ppsj-info-item" v-for="(item, index) in sbpptj" :key="index">
              <div class="item-title">
                <div class="dot" :style="{ background: `${innerColor[index]}` }"></div>
                <div class="icon">
                  <img :src="bjpptjImg[index]" alt="Image" />
                </div>
                <div class="value">{{ item.total }}</div>
              </div>
              <div class="item-detail">
                <div class="item-detail-item" v-for="(i, index) in item.list" :key="index">
                  <div class="item-icon">
                    <img :src="alarmIcon[index]" alt="Image" />
                  </div>
                  <div class="item-value">{{ i.value }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </card-module2>
    </div>
    <div class="card-wrapper3">
      <card-module2 title="故障设备部件统计" width="49%" height="429px">
        <div class="bjtj w-full">
          <div class="bjtj-item" v-for="(item, index) in percentages" :key="index">
            <img :src="bjtjImg[index]" alt="Image" />
            <div class="bjtj-info">
              <p :style="{ width: `${Number(item.fatalP) + Number(item.importantP) + Number(item.secondaryP)}%`}">故障总数: {{ item.total }}</p>
              <div class="jdt">
                <div class="progress">
                  <div class="segment" :style="{ left: 0, width: `${item.fatalP}%`, background: 'rgba(255, 53, 53, 1)' }">
                    <p>{{ bjtjData[index].fatal }}</p>
                  </div>
                  <div class="segment" :style="{ left: `${item.fatalP}%` , width: `${item.importantP}%`,  background: 'rgba(254, 133, 0, 1)' }">
                    <p>{{ bjtjData[index].important }}</p>
                  </div>
                  <div class="segment" :style="{ left: `${Number(item.fatalP) + Number(item.importantP)}%` , width: `${item.secondaryP}%`,  background: 'rgba(255, 191, 1, 1)' }">
                    <p>{{ bjtjData[index].secondary }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </card-module2>
      <card-module2 title="故障设备部件品牌统计" width="49%" height="429px">
        <div class="bjpptj w-full h-full flex">
          <div class="w-7/12 h-full">
            <rose-type :data="bjpptjData" width="100%" height="100%" />
          </div>
          <div class="bjpptj-list w-5/12 h-full">
            <div class="bjpptj-list-item" v-for="(item, index) in bjpptjData" :key="index">
              <div class="item-icon">
                <img :src="bjpptjImg[index]" alt="Image" />
              </div>
              <div class="item-value">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </card-module2>
    </div>
  </div>
</template>

<style scoped lang="stylus">
.gzsb {
  font-size: 16px;
  font-weight: 400;
  color: #000000;
}
.card-wrapper3 {
  margin: 20px 2px 0 0;
  display: flex;
  justify-content: space-between;
}

/** 品牌设计 */
.ppsj {
  display: flex;
  justify-content: space-between;
  .ppsj-chart {
    width: 400px;
    height: 100%;
  }
  .ppsj-info {
    flex: 1;
    margin-top: 85px;
    height: 256px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .ppsj-info-item {
      height: 70px;
      .item-title {
        height: 28px;
        margin-bottom: 2px;
        display: flex;
        justify-content: start;
        .dot {
          width: 12px;
          height: 12px;
          background: rgba(107, 230, 193, 1);
          border-radius: 50%;
          margin: 10px 8px 0 0;
        }
        .icon {
          width: 35px;
          height: 33px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .value {
          font-size: 20px;
          color: rgba(18, 18, 18, 1);
          font-weight: 600;
          margin-left: 8px;
        }
      }
      .item-detail {
        height: 40px;
        line-height: 40px;
        padding: 0 5px 0 18px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        .item-detail-item {
          width: 20%;
          display: flex;
          justify-content: start;
          .item-icon {
            width: 20px;
            height: 19px;
            margin-right: 8px;
            margin-top: 3px;
          }
          .item-value {
            font-size: 18px;
            font-weight: 600;
          }
        }
      }
    }
  }
}

/** 故障设备部件统计*/
.bjtj {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 344px;
  margin-top: 14px;
  .bjtj-item {
    height: 70px;
    line-height: 70px;
    display: flex;
    justify-content: start;
    margin-left: 37px;
    img {
      width: 50px;
      height: 50px;
      margin: 10px 20px 0 0;
    }
    .bjtj-info {
      height: 100%;
      width: 100%;
      p {
        font-weight: 500;
        color: rgba(18, 18, 18, 1);
        height: 22px;
        line-height: 22px;
        text-align: center;
      }
      .jdt {
        margin-top: 4px;
        height: 44px;
        position: relative;
        .progress {
          position: absolute;
          left: 0;
          top: 0;
          height: 10px;
          border-radius: 0 3px 3px 0;
          width: 100%;
          .segment {
            height: 100%;
            position: absolute;
          }
          p {
            height: 70px;
            line-height: 50px;
            width: 100%;
            text-align: center;
          }
        }
      }
    }
  }
}

/** 故障设备部件品牌统计 */
.bjpptj {
  .bjpptj-list {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-top: 36px;
    height: 296px;
    .bjpptj-list-item {
      height: 56px;
      display: flex;
      justify-content: start;
      .item-icon {
        width: 36%;
        line-height: 56px;
      }
      .item-value {
        flex: 1;
        line-height: 56px;
        font-size: 24px;
        font-weight: 600;
        color: rgba(18, 18, 18, 1);
      }
    }
  }
}
</style>